<template>
	<view class="s-page-wrapper is-100vh">
		<view class="has-mgt-10">
			<view class="is-flex is-column is-justify-center  is-align-center is-height-100">
				<image src="../../static/logo.png" mode="aspectFit" class="logoimg"></image>
			</view>
		</view>
		<view class="content">
			<view>
				<view class=" has-mgtb-10 ">
					<input type="number" maxlength="11" v-model="login.username" placeholder="请输入手机号" class="is-input1 " @input="BindInput"
					 data-val="username" />
				</view>
				<view class=" has-radius has-mgtb-10">
					<input v-model="login.password" placeholder="请输入登录密码" class="is-input1" @input="BindInput" data-val="password" />
				</view>

				<view class=" has-radius has-mgtb-10">
					<button style="width: 100%" type="primary" :loading="login.loading" @tap="defaultHandlerLogin"> {{ login.loading ? "登录中...":"登 录"}}
					</button>
				</view>

				<view class=" has-radius has-mgtb-10 bottom-nav">
					<navigator url="register">
						<text>注册账号</text>
					</navigator>
					<navigator url="findpwd">
						<text>忘记密码？</text>
					</navigator>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import userService from "@/api/user.js"
	export default {
		data() {
			return {
				login: {
					loading: false,
					username: "18666664444",
					password: "123456"
				},

			};
		},
		methods: {
			defaultHandlerLogin: function() {
				this.login.loading = true;
				userService.login(this.login).then(res => {
					this.login.loading = false;
					uni.showToast({
						icon:"none",
						title: res.data.msg,
						duration: 2000
					});
					if (res.data.success) {
						uni.setStorage({
							key: 'token',
							data: res.data.data.token,
							success: function() {
								uni.switchTab ({
									url: "/pages/index/index"
								});
							}
						});
						userService.getUserInfo()
					} 

				});
			},
			BindInput: function(e) {
				var dataval = e.currentTarget.dataset.val;
				this.login[dataval] = e.detail.value;
			}
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #FFFFFF;
	}

	.content {
		width: 85%;
		margin: 0 auto;
	}

	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #f35;
		opacity: 0.8;
	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.is-input1 {
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		/* padding: 12rpx; */
		color: #353535;
		font-size: 32rpx;
		box-sizing: border-box;
		appearance: none;
		border: 2rpx solid #e5e5e5;
		box-shadow: none;
		border-radius: 14rpx;
		outline: 0;
		display: block;
		padding-left: 30rpx;
		margin: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
	}

	.bottom-nav {
		font-size: 14px;
		display: box;
		display: -webkit-box;
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		justify-content: space-between;

	}
</style>
